<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/css.css">
    <title>DOM查询</title>
    <script type="text/javascript">
		// 定义一个函数，专门用来为指定元素绑定单击响应函数
		// 参数：
		// 	idstr	要绑定单击响应函数的对象的id属性值
		// 	fun		事件的回调函数，当单击元素时，该函数将会被触发
		function myClick(idStr, fun){
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}
		
        window.onload = function () {
            // 1、查找#bj节点
			// 为id为btne1的按钮绑定一个单击响应函数
			myClick("btn01", function () {
				// innerHTML 通过这个属性可以获取到元素内部的html代码
                alert(document.getElementById("bj").innerHTML); // 北京
            });

            // 2、查找所有1i节点
            myClick("btn02", function () {
				// getElementsByTagName()可以根据标签名来获取一组元素节点对象
				// 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
				// 即使查询到的元素只有一个，也会封装到数组中返回
                var li_list = document.getElementsByTagName("li");
				alert(li_list.length); // 14
				
				var arr = [];
                for(var i=0;i<li_list.length;i++){
					arr.push(li_list[i].innerHTML);
				}
				alert(arr); // 北京,上海,东京,首尔,红警,实况,极品飞车,魔兽,IOS,Android,Windows Phone,IOS,Android,Windows Phone
            });
			
            // 3、查找name=gender的所有节点
			myClick("btn03", function () {
				var inputs = document.getElementsByName("gender");
				alert(inputs.length); // 2
				
				var arr = [];
				for(var i=0;i<inputs.length;i++){
					// innerHTML用于获取元素内战的HTML代码的
					// 如果需要读取元素节点属性，直接使用`元素.属性名`
					// 例子：`元素.id`  `元素.name`  `元素.value`
					arr.push(inputs[i].value); 
					// 注意：class属性不能采用这种方式，读取class属性时需要使用`元素.className`
					arr.push(inputs[i].className);
				}
				alert(arr); // male,hello,female,hello
			});
			
            // 4、查找#city下所有1i节点
			myClick("btn04", function () {
				var city = document.getElementById("city");
				// 获取city下1i节点
				var list = city.getElementsByTagName("li");
				alert(list.length); // 4
				
				var arr = [];
				for(var i=0;i<list.length;i++){
					arr.push(list[i].innerHTML);
				}
				alert(arr); // 北京,上海,东京,首尔
			});
			
            // 5、返回#city的所有子节点
			myClick("btn05", function () {
				var city = document.getElementById("city");
				// childNodes属性会获取包括文本节点在内的所有节点
				// 根据DOM标签标签间空白也会当成文本节点
				// 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
				// 所以该属性在IE8中会返回4个子元素，而其他浏览器是9个
				var list = city.childNodes;
				alert(list.length); // 9
				
				var arr = [];
				for(var i=0;i<list.length;i++){
					arr.push(list[i]);
				}
				alert(arr); // [object Text],[object HTMLLIElement],[object Text],[object HTMLLIElement],[object Text],[object HTMLLIElement],[object Text],[object HTMLLIElement],[object Text]
			});
			myClick("btn05", function () {
				var city = document.getElementById("city");
				// children属性可以获取当前元素的所有子元素
				var list = city.children;
				alert(list.length); // 4
				
				var arr = [];
				for(var i=0;i<list.length;i++){
					arr.push(list[i].innerHTML);
				}
				alert(arr); // 北京,上海,东京,首尔
			});
			
            // 6、返回#phone的第一个子节点
			myClick("btn06", function () {
				var phone = document.getElementById("phone");
				// firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
				var firstChild = phone.firstChild;				
				alert(firstChild); // [object HTMLLIElement]
				alert(firstChild.innerHTML); // IOS
			});
			myClick("btn06", function () {
				var phone2 = document.getElementById("phone2");
				// firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
				var firstChild = phone2.firstChild;				
				alert(firstChild); // [object Text]
				alert(firstChild.innerHTML); // undefined
			});
			myClick("btn06", function () {
				var phone2 = document.getElementById("phone2");
				// firstElementchild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用
				var firstElementChild = phone2.firstElementChild;				
				alert(firstElementChild); // [object HTMLLIElemen]
				alert(firstElementChild.innerHTML); // IOS
			});
			
			// 6.2、返回#phone的最后一个子节点
			myClick("btn062", function () {
				var phone = document.getElementById("phone");
				// children属性可以获取当前元素的所有子元素
				var lastChild = phone.lastChild;				
				alert(lastChild); // [object HTMLLIElement]
				alert(lastChild.innerHTML); // Windows Phone
			});
			
            // 7、返回#bj的父节点
			myClick("btn07", function () {
				var bj = document.getElementById("bj");
				var parentNode = bj.parentNode;				
				alert(parentNode); // [object HTMLUListElement]
				alert(parentNode.innerHTML);
				// <li id="bj">北京</li>
				// <li>上海</li>
				// <li>东京</li>
				// <li>首尔</li>
				
				// innerText
				// -该属性可以获取到元素内部的文本内容
				// -它和innerHTML类似，不同的是它会自动将htm1去除
				alert(parentNode.innerText);
				// 北京
				// 上海
				// 东京
				// 首尔
			});
			
            // 8、返回#android的前一个兄弟节点
			myClick("btn08", function () {
				var android = document.getElementById("android");
				// 返回#android的前一个兄弟节点（也可能获取到空白的文本）
				var previousSibling = android.previousSibling;				
				alert(previousSibling); // [object HTMLLIElement]
				alert(previousSibling.innerHTML); // IOS
			});
			myClick("btn08", function () {
				var android2 = document.getElementById("android2");
				// 返回#android的前一个兄弟节点（也可能获取到空白的文本）
				var previousSibling = android2.previousSibling;				
				alert(previousSibling); // [object Text]
				alert(previousSibling.innerHTML); // undefined
			});
			myClick("btn08", function () {
				var android2 = document.getElementById("android2");
				// previousElementSibling获取前一个兄弟元素，IE8及以下不支持
				var previousElementSibling = android2.previousElementSibling;				
				alert(previousElementSibling); // [object HTMLLIElement]
				alert(previousElementSibling.innerHTML); // IOS
			});
			
			// 8.2、返回#android的下一个兄弟节点
			myClick("btn082", function () {
				var android = document.getElementById("android");
				// 返回#android的前一个兄弟节点（也可能获取到空白的文本）
				var nextSibling = android.nextSibling;				
				alert(nextSibling); // [object HTMLLIElement]
				alert(nextSibling.innerHTML); // Windows Phone
			});
			
            // 9、读取#username的value属性值
			myClick("btn09", function () {
				var username = document.getElementById("username");	
				// 读取um的value属性值文本框的value属性值，就是文本框中填写的内容
				alert(username.value); // abcde
			});
			
            // 10、设置#username的value属性值
			myClick("btn10", function () {
				var username = document.getElementById("username");	
				username.value = "Hello World";
			});
			
            // 11、返回#bj的文本值
			myClick("btn11", function () {
				var bj = document.getElementById("bj");	
				// alert(bj.innerHTML); // 北京
				// alert(bj.innerText); // 北京
				
				// var firstChild = bj.firstChild;
				// alert(firstChild); // [object Text]
				// alert(firstChild.nodeValue); // 北京
				alert(bj.firstChild.nodeValue); // 北京
			});
        };
    </script>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

            <br>
            <br>

            <p>
                你喜欢哪款单机游戏?
            </p>

            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>

            <br />
            <br />

            <p>
                你手机的操作系统是?
            </p>

            <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
            <ul id="phone2">
				<li>IOS</li>
				<li id="android2">Android</li>
				<li>Windows Phone</li>
			</ul>
        </div>

        <div class="inner">
            gender:
            <input class="hello" type="radio" name="gender" value="male" />
            Male
            <input class="hello" type="radio" name="gender" value="female" />
            Female
            <br>
            <br>
            name:
            <input type="text" name="name" id="username" value="abcde" />
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">返回#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn062">返回#phone的最后一个子节点</button></div>
        <div><button id="btn07">返回#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div><button id="btn082">返回#android的下一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>

    <script type="text/javascript">

    </script>
</body>

</html>